<template>
  <div class="com-container">
    <div id="container" style="width:100%;height:100%;"></div>
    <ul class="drawing-panel" style="z-index: 99;">
      <li class="btn" @click="reset()">重新开始</li>
      <li class="btn" @click="pauseAni()">暂停</li>
      <li class="btn" @click="continueAni()">开始</li>
    </ul>
  </div>
</template>

<script>
import location from '@/api/data/location'
import { Message } from 'element-ui'

export default {
  props: ['locationId', 'figureId', 'mapKey'],
  watch: {
    mapKey: {
      handler: function (newVal) {
        const point = this.locationMap.get(this.locationId)
        if (typeof point !== 'undefined') {
          this.map.centerAndZoom(new BMapGL.Point(point.lng, point.lat), 12)
          return
        }
        Message({
          message: '地点信息缺失...' || 'Error',
          type: 'error',
          duration: 3 * 1000
        })
      }
    }
  },
  data () {
    return {
      locationList: [],
      markers: [],
      pointArray: [],
      map: {},
      locationMap: new Map(),//地点map key：id，value：{经纬度}
      trackAni: {}
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      var map = new BMapGL.Map('container')
      // map.setMapStyleV2({
      //   styleId: 'c1da7b4f875a03d348e5815474fbd645'
      // })
      map.setMapType(BMAP_EARTH_MAP);
      map.enableScrollWheelZoom(true)

      //根据人物地点获取人物地点列表
      const res = await location.getFigureLocation(this.figureId)
      const locationList = res.data.figureLocationList
      //封装 Marker 数组
      for (let i = 0; i < locationList.length; i++) {
        const loc = locationList[i]
        const lng = loc.longitude
        const lat = loc.latitude
        if (!lng || !lat) {
          continue
        }
        const point = new BMapGL.Point(lng, lat)
        this.pointArray.push(point)
        const marker = new BMapGL.Marker(point)
        // 创建图文信息窗口
        const sContent = `<h4 style='margin:0 0 5px 0;'>${loc.locationTitle}</h4>
    <img style='float:right;margin:0 4px 22px' id='imgDemo' src='${loc.locationImg}' width='139' height='104'/>
    <p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
    ${loc.description}
    </p></div>`
        const infoWindow = new BMapGL.InfoWindow(sContent)
        marker.addEventListener('click', () => {
          marker.openInfoWindow(infoWindow)
          // 图片加载完毕重绘infoWindow
          document.getElementById('imgDemo').onload = function () {
            // 防止在网速较慢时生成的信息框高度比图片总高度小，导致图片部分被隐藏
            infoWindow.redraw()
          }
        })

        const label = new BMapGL.Label(loc.year+"\n"+loc.locationTitle, {
          offset: new BMapGL.Size(15, -25)
        });

        label.setStyle({
          background: '#ff8355',
          border: '1px solid "#ff8355"',
          borderRadius: "5px",
          color: '#fff',
          height: "26px",
          lineHeight: "26px",
          textAlign: "center",
          // width: "120px"
          width: loc.locationTitle.length*40+"px"
        });
        marker.setLabel(label)
        //将Marker添加到数组
        map.addOverlay(marker)
      }


      locationList.forEach(item => {
        if (item.longitude && item.latitude) {
          this.locationMap.set(item.id, {
            lng: item.longitude,
            lat: item.latitude
          })
        }
      })
      if(locationList.length>0){
        map.centerAndZoom(new BMapGL.Point(locationList[0].longitude, locationList[0].latitude), 5)
      }
      else {
        map.centerAndZoom(new BMapGL.Point(108, 34), 5)
      }
      this.map = map
    },
    start () {
      this.trackAni.start()
    },
    pauseAni () {
      this.trackAni.pause()
    },
    continueAni () {
      if(JSON.stringify(this.trackAni) ==='{}'){
        // this.map.setMapType(BMAP_NORMAL_MAP)
        const pl = new BMapGL.Polyline(this.pointArray, {
          strokeColor: '#2A5FCD',
          strokeWeight: 7,
          strokeOpacity: 0.8
        })
        setTimeout(this.start, 4000)
        this.trackAni = new BMapGLLib.TrackAnimation(this.map, pl, {
          overallView: true,
          tilt: 30,
          duration: this.pointArray.length*5000,
          delay: this.pointArray.length * 10
        })
        return ;
      }
      this.trackAni.continue()
    },
    reset(){
      if(this.trackAni){
        this.trackAni = {};
        this.init();
      }
    }
  }
}
</script>

<style scoped>
ul li {
  list-style: none;
}

.drawing-panel {
  z-index: 999;
  position: fixed;
  bottom: 3.5rem;
  margin-left: 3rem;
  padding: 1rem 1rem;
  border-radius: .25rem;
  background-color: #fff;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}

.btn {
  width: 90px;
  height: 30px;
  float: left;
  background-color: #fff;
  color: rgba(27, 142, 236, 1);
  font-size: 14px;
  border: 1px solid rgba(27, 142, 236, 1);
  border-radius: 5px;
  margin: 0 5px;
  text-align: center;
  line-height: 30px;
}

.btn:hover {
  background-color: rgba(27, 142, 236, 0.8);
  color: #fff;
}

</style>
